function Magnifier(ops){
    this.left = ops.left;
    this.right = ops.right;
    this.sBspan = ops.Zz;
    this.sBox = ops.sImg;
    this.bBox = ops.bBox;
    this.sBimg = ops.sImg;
    this.sBimgb = ops.sImgb;
    this.bBimg = ops.bImg;
    this.imgBox = ops.ul;
    this.imgs = ops.lis;
    this.imgBox.style.width = (this.imgs.length+1)*this.imgs[0].offsetWidth +"px";
    this.index = 0;
    this.addEvent();
}
Magnifier.prototype.addEvent = function(){
    const _this = this;
    this.sBox.onmouseenter = function(){
        _this.show();
    }
    this.sBox.onmouseleave = function(){
        _this.hide();
    }
    this.sBox.onmousemove = function(eve){
        const e = eve||window.event;
        _this.move(e); 
    }
    this.left.onclick = function(){
        _this.leftChangeIndex();
    }
    this.right.onclick = function(){
        _this.rightChangeIndex();
    }
    // console.log(this.left);
    for(let i=0;i<this.imgs.length;i++){
        this.imgs[i].onclick = ()=>{
            for(var j=0;j<this.imgs.length;j++){
                this.imgs[j].style.border = "1px solid #EFF0F5";
            }
            // console.log(this.sBimgb);

            this.bBimg.src = this.sBimgb.src = this.imgs[i].src;
            this.imgs[i].style.border = "1px solid red"
        }
    }
}
Magnifier.prototype.rightChangeIndex = function(){
    if(this.index === this.imgs.length-5){
        this.index = 0;
    }else{
        this.index++;
    }
    this.render();
}
Magnifier.prototype.leftChangeIndex = function(){
    if(this.index === 0){
        this.index = 0
    }else{
        this.index--;
    }
    this.render();
}
Magnifier.prototype.render = function(){
    move(this.imgBox,{
        left:-this.index*this.imgs[0].offsetWidth
    })
}
Magnifier.prototype.show = function(){
    this.bBox.style.display = "block";
    // console.log(this.sBspan);
    this.sBspan.style.display = "block";
    this.sBspan.style.width = this.bBox.offsetWidth / this.bBimg.offsetWidth * this.sBimg.offsetWidth + "px";
    // this.sBox.offsetWidth/(this.bBimg.offsetWidth/this.bBox.offsetWidth)+"px";
    
    this.sBspan.style.height = this.bBox.offsetHeight / this.bBimg.offsetHeight * this.sBimg.offsetWidth + "px";
}
Magnifier.prototype.hide = function(){
    this.bBox.style.display = "none";
    this.sBspan.style.display = "none";
}
Magnifier.prototype.move = function(e){
    let L = e.pageX -(this.sBox.offsetWidth /2)- this.sBspan.offsetWidth +110;
    let T = e.pageY -this.sBox.offsetHeight/2- this.sBspan.offsetHeight/2 -110;
    if(L < 0) L = 0;
    if(T < 0) T = 0;
    if(L > this.sBox.offsetWidth - this.sBspan.offsetWidth){
        L = this.sBox.offsetWidth - this.sBspan.offsetWidth
    }
    if(T > this.sBox.offsetHeight - this.sBspan.offsetHeight){
        T = this.sBox.offsetHeight - this.sBspan.offsetHeight
    }
    this.sBspan.style.left = L + "px";
    this.sBspan.style.top = T + "px";
    let X = L/(this.sBox.offsetWidth -  this.sBspan.offsetWidth);
    let Y = T/(this.sBox.offsetHeight - this.sBspan.offsetHeight);
    this.bBimg.style.left = (this.bBox.offsetWidth-this.bBimg.offsetWidth)*X+0.992+"px";
    this.bBimg.style.top = (this.bBox.offsetHeight-this.bBimg.offsetHeight)*Y-4.98+"px";
}